<template>
	<view>
		<!-- camera -->
		<view class="camera">
			<my-button>
				<view class="btn-content">
					<text :class="['icon','iconfont', 'iconxiangji', 'defaultIcon']"></text>
				</view>
			</my-button>
		</view>
		<view class="top-user">
			<view class="left-box">
				<view class="header-box">
					<image class="img" src="../../static/images/head.jpg" mode="scaleToFill"></image>
				</view>
						
				
				<view class="info-user">
					<view class="name"> 清风 </view>
					<view class="account"> 微信号： zr94188 </view>
				</view>
			</view>
			
			
			<view class="action-user">
				<view class="action-user-item">
					<my-button>
						<view class="btn-content">
							<text :class="['icon','iconfont', 'iconerweima', 'defaultIcon']"></text>
						</view>
					</my-button>
				</view>
				<view class="action-user-item">
					<my-button>
						<view class="btn-content">
							<text :class="['icon','iconfont', 'iconiconfontjiantou5', 'defaultIcon']"></text>
						</view>
					</my-button>
				</view>
				
			</view>
		</view>
		
		<view class="pay-bar">
			<view class="pay">
				<text :class="['icon','iconfont', 'iconweixinzhifu', 'defaultIcon']"></text>
				<text class="text">支付</text>
			</view>
			<text :class="['icon','iconfont', 'iconiconfontjiantou5', 'rightIcon']"></text>
		</view>
		
		<view class="more-list">
			<view class="more-item" v-for="(item, index) in list" :key="item.id">
				<text :class="['icon','iconfont', item.icon, 'defaultIcon',item.iconClass]"></text>
				<view class="right">
					<text class="text">{{ item.title }}</text>
					<text :class="['icon','iconfont', 'iconiconfontjiantou5', 'rightIcon']"></text>
				</view>
				
			</view>
		</view>
		
		<view class="set-bar">
			<view class="set">
				<text :class="['icon','iconfont', 'iconswticonshezhitianchong', 'defaultIcon']"></text>
				<text class="text">设置</text>
			</view>
			<text :class="['icon','iconfont', 'iconiconfontjiantou5', 'rightIcon']"></text>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				list:[
					{
						id:1,
						icon: 'iconshoucang',
						title: '收藏',
						iconClass:'iconFor_shoucang',
					},
					{
						id:2,
						icon: 'iconxiangce',
						title: '相册',
						iconClass:'iconFor_xiangce',
					},
					{
						id:3,
						icon: 'iconwodeqiabao0101',
						title: '卡包',
						iconClass:'iconFor_kabao',
					},
					{
						id:4,
						icon: 'iconbiaoqing',
						title: '表情',
						iconClass:'iconFor_biaoqing',
					}
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.camera{
		display: flex;
		justify-content: flex-end;
		.btn-content{
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 12rpx 22rpx;
			.defaultIcon{
				font-size: 28rpx;
				color: $my-app-primary-color;
			}	
		}
	}
	
	.top-user{
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
		.left-box{
			display: flex;
			.header-box{
				width: 140rpx;
				height: 140rpx;
				background: $my-app-bg-color;
				border-radius: 20rpx;
				box-shadow: -10rpx 10rpx 10rpx #d0d7e1, 10rpx -10rpx 10rpx #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
				.img{
					width: 130rpx;
					height: 130rpx;
					border-radius: 20rpx;
					
				}
			}
			.info-user{
				margin-left: 38rpx;
				padding: 8rpx 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.name{
					font-size: 36rpx;
					font-weight: bold;
					color: $my-app-primary-color;
					letter-spacing: 6rpx;
				}
				.account{
					font-size: 28rpx;
					color: $my-app-default-color;
					letter-spacing: 2rpx;
				}
			}
		}
		
		.action-user{
			display: flex;
			align-items: flex-end;
			.action-user-item{
				margin-left: 20rpx;
				.btn-content{
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 5rpx 16rpx;
					.defaultIcon{
						font-size: 28rpx;
						color: $my-app-default-color;
					}	
				}
			}
			
		}
		
	}
	
	.pay-bar{
		margin-top: 70rpx;
		padding: 0rpx 20rpx 0rpx 40rpx;
		border-radius: 20rpx;
		background: $my-app-bg-color;
		box-shadow: -3px 3px 6px #bbc4d3, 3px -4px 6px #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.pay{
			display: flex;
			align-items: center;
			.defaultIcon{
				font-size: 56rpx;
				color: rgb(1,184,1);
			}
			.text{
				margin-left: 20rpx;
				color: $my-app-primary-color;
				font-size: 30rpx;
				font-weight: bold;
				letter-spacing: 2rpx;
				position: relative;
				top: -4rpx;
			}
		}
		.rightIcon{
			color: $my-app-default-color;
		}
	}
	
	.more-list{
		margin-top: 50rpx;
		border-radius: 20rpx;
		background: $my-app-bg-color;
		box-shadow: -3px 3px 6px #bbc4d3, 3px -4px 6px #ffffff;
		.more-item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0rpx 20rpx 0rpx 40rpx;
			.defaultIcon{
				font-size: 56rpx;
			}
			
			.iconFor_shoucang{
				color: rgb(232,124,86);
			}
			.iconFor_xiangce{
				color: rgb(51,142,249);
			}
			.iconFor_kabao{
				color: rgb(51,142,249);
			}
			.iconFor_biaoqing{
				color: rgb(229,167,99);
				font-size: 70rpx;
				margin-left: -8rpx;
			}
			.right{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				line-height: 90rpx;
				.text{
					margin-left: 20rpx;
					color: $my-app-primary-color;
					font-size: 30rpx;
					font-weight: bold;
					letter-spacing: 2rpx;
					position: relative;
					top: -4rpx;
				}
				.rightIcon{
					color: $my-app-default-color;
				}
			}
			
			.right::after{
				content: '';
				position: absolute;
				display: block;
				height: 2rpx;
				background-color: rgba(236, 237, 239, .66);
				bottom: 0;
				left: 20rpx;
				right: 0;
			}
			
			
		}
		
		.more-item:last-child{
			.right::after{
				display: none;
			}
		} 
	}
	
	.set-bar{
		margin-top: 50rpx;
		padding: 0rpx 20rpx 0rpx 40rpx;
		border-radius: 20rpx;
		background: $my-app-bg-color;
		box-shadow: -3px 3px 6px #bbc4d3, 3px -4px 6px #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.set{
			display: flex;
			align-items: center;
			.defaultIcon{
				font-size: 56rpx;
				color: rgb(1,184,1);
			}
			.text{
				margin-left: 20rpx;
				color: $my-app-primary-color;
				font-size: 30rpx;
				font-weight: bold;
				letter-spacing: 2rpx;
				position: relative;
				top: -4rpx;
			}
		}
		.rightIcon{
			color: $my-app-default-color;
		}
	}
</style>
